<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>饼状图</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		
		<link href="./css/search.css" rel="stylesheet" type="text/css" />
		<link href="./css/header.css" rel="stylesheet" type="text/css" />
		<link href="./css/userinfo.css" rel="stylesheet" type="text/css"/>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script src="js/highcharts.js"></script>
		<script src="js/exporting.js"></script>

		<script type="text/javascript">
	$(function() {
		$('#userUrl').keypress(function(e){
			if(e.keyCode == 13){
				$('#btn').click();
			}
		});
		
		$('#btn')
				.click(
						function() {
							var pattern = '^[0-9a-zA-Z]{4,20}$';
							if (!$('#userUrl').val().match(pattern)) {
								alert('请输入正确的 uid/个性域名/微号！');
							} else {
								$('#loading').show();
								$
										.ajax({
											type : "POST",
											dataType : "JSON",
											url : "servlet/Pie",
											data : $('#userUrl').serialize(),
											success : function(data) {
												$('#loading').hide();
												$('#info').show();
												var screenName = data.userInfo[0]; //用户昵称
												$('.listpic a').attr("href",
														data.userInfo[1]); //用户url
												$('.leftB a').attr("href",
														data.userInfo[1]);
												$('.listpic img').attr("src",
														data.userInfo[2]); //添加头像url
												$('#nameInfo a').text(
														screenName); //用户昵称
												$('#region').text(
														data.userInfo[3]); //用户性别极其地区
												$('#follow').text(
														data.userInfo[4]); //关注数
												$('#fans').text(
														data.userInfo[5]); //粉丝数
												$('#statuses').text(
														data.userInfo[6]); //微博数
												
														var chart = new Highcharts.Chart(
																{
																	exporting: {
															            buttons: {
															                contextButton: {
															                    menuItems: [
															                    	Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0]
															                    ]
															                    .concat([{
															                        separator: true
															                    },{
															                        text: '导出PNG文件',
															                        onclick:function() {
															                        	exportChart(chart,"image/png");
															                        }
															                    },{
															                        text: '导出JPG文件',
															                        onclick:function() {
															                        	exportChart(chart,"image/jpeg");
															                        }
															                    },{
															                        text: '导出SVG文件',
															                        onclick:function() {
															                        	exportChart(chart,"image/svg+xml");
															                        }
															                    },{
															                        text: '导出PDF文件',
															                        onclick:function() {
															                        	exportChart(chart,"application/pdf");
															                        }
															                    }])
															                }
															            }
															        },
																	chart : {
																		renderTo: 'container',
																		type : 'pie',
																		options3d : {
																			enabled : true,
																			alpha : 45,
																			beta : 0
																		}
																	},
																	title : {
																		text : screenName
																				+ '的个人情感百分比'
																	},
																	subtitle : {
																		text : '(饼状图)'
																	},
																	tooltip : {
																		pointFormat : '{series.name}: <b>{point.percentage:.1f}%</b>'
																	},
																	plotOptions : {
																		pie : {
																			allowPointSelect : true,
																			cursor : 'pointer',
																			depth : 35,
																			dataLabels : {
																				enabled : true,
																				format : '{point.name}'
																			}
																		}
																	},
																	series : [ {
																		type : 'pie',
																		name : '情感百分比',
																		data : data.series
																	} ],
																	credits : {
																		enabled : false
																	}
																});
														
												$(".download").click(function(){
											    	exportChart(chart,$(this).attr("type"));
											    });
											},
											error : function(data) {
												$('#loading').hide();
												alert("error:"
														+ "网络错误");
											}

										});
							}

						});
		function exportChart(chart,type) {
			$("input[name='svg']").val(chart.getSVG());
			$("input[name='width']").val(600);
			$("input[name='type']").val(type);
			$("input[name='method']").val("download");
			$("form").submit();
		}
	});
</script>
	</head>

	<body>

		<div id="header">
			<div id="logo">
				<a href="./index.jsp"> <img src="./img/logo.png"> </a>
			</div>
			<div id="nav">
				<ul class="menu">
					<li class="current">
						<a href="./index.jsp">首页</a>
					</li>
					<li>
						<a href="./spline.jsp">在线分析</a>
						<ul>
							<li>
								<a href="./spline.jsp">曲线图</a>
							</li>
							<li>
								<a href="./pie.jsp">饼状图</a>
							</li>
							<li>
								<a href="./hourlyline.jsp">时变图</a>
							</li>
							<li>
								<a href="./weeklycolumn.jsp">周变图</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="./single.jsp">即时分析</a><span class="lines"></span>
					</li>
					<li>
						<a href="./offline.jsp">离线分析</a><span class="lines"></span>
					</li>
				</ul>
			</div>
		</div>

		<div class="search">
			<div id="search">
				<input type="text" name="userUrl" id="userUrl"
					value="请输入微博uid/个性域名/微号"
					onFocus="if(value==defaultValue){value='';this.style.color='#000'}"
					onBlur="if(!value){value=defaultValue;this.style.color='#999'}"
					style="color: #999999">
				<input id="btn" class="button" type="button" value="提交">
			</div>
		</div>
		
		<div id="loading" style="display: none ;margin:0 0 20px 0" align="center" >
			<img weight=“40px” height="40px" src="./img/loading.gif">
		</div>
		
		<div id="info" class="list_weibo yahei" style="display: none">
			<div style="left: 9px; top: -10px; z-index: 100" class="listpic">
				<a target="_blank"> <img width="80" height="80"> </a>
			</div>
			<div style="padding: 8px 0 0 0; float: left" class="leftB">
			<p id="nameInfo">
				<span style="font-size: 14px;"> <strong> <a
						target="_blank" style="text-decoration: none; color: #FFF;">昵称</a>
				</strong> <span class=""></span> </span>
			</p>
			<p id="otherInfo">
				<span id="region">性别/地区</span>
				<span class="blue">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
				<span class="blue">关注&nbsp;</span>
				<span id="follow">0</span>
				<span class="blue">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
				<span class="blue">粉丝&nbsp;</span>
				<span id="fans">0</span>
				<span class="blue">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
				<span class="blue">微博&nbsp;</span>
				<span id="statuses">0</span>
			</p>
			</div>
		</div>
	
		<div id="container"></div>
		<!-- 隐藏的表单 -->
	<form method="post" action="servlet/ExportServlet">
		<input type="hidden" name="svg">
		<input type="hidden" name="width">
		<input type="hidden" name="type">
		<input type="hidden" name="method">
	</form> 
	</body>
</html>
